<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Spirit8</title>
    <link rel="stylesheet" href="./style/reset.css" />
    <link rel="stylesheet" href="./style/animate.css" />
    <link rel="stylesheet" href="./style/index.css" />

    <script src="./js/wow.min.js"></script>
</head>
<body>
    <div class="wrapper">
            <input type="checkbox" name="nav" id="nav" />
        <header class="header">
            
            <div class="container">
                <a class="wow rubberBand logo" data-wow-duration="1s" href="javascript:void(0)">Spirit8</a>
                <label class="wow bounceInRight menu" data-wow-duration="1s"  for="nav">
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
                <nav class="nav wow bounceIn" data-wow-duration="1s">
                    <a href="#">home</a>
                    <a href="#">about</a>
                    <a href="#">SERVICES</a>
                    <a href="#">portfolio</a>
                    <a href="#">testimonials</a>
                    <a href="#">CONTACT</a>
                </nav>
            </div>
        </header>
        <div class="banner">
            <div class="container">
                    <video id="bgvid" autoplay loop muted>
                        <source src="./images/1.mp4" type="video/mp4" />
                    </video>
                <h1 class="wow fadeIn" data-wow-duration="1s" >wELCOME on <span>spirit8</span></h1>
                <p class="wow rotateIn" data-wow-duration="1s" data-wow-delay="500ms">We are a digital agency with years of experience and with extraordinary people</p>
                <a class="wow zoomIn" data-wow-duration="500ms" href="#"></a>
            </div>
        </div>
        <div class="about">
            <div class="container">
                <div class="about_box">
                    <div class="about_content">
                        <h3 class="wow flipInX" data-wow-duration="1s">About us</h3>
                        <h1 class="wow lightSpeedIn" data-wow-duration="1s"><span>Some</span> words <span>about us</span></h1>
                        <p class="wow fadeInLeftBig" data-wow-duration="1s">We love building and rebuilding brands through our specific skills. Using colour, fonts, and illustration, we brand
                        companies in a way they will never forget.</p>
                        <ul>
                            <li class="wow fadeInDownBig" data-wow-duration="1s" data-wow-delay="0.5s"><span>Mission -</span>We deliver uniqueness and quality</li>
                            <li class="wow fadeInDownBig" data-wow-duration="1s" data-wow-delay="0.7s"><span>Skills -</span>Delivering fast and excellent results</li>
                            <li class="wow fadeInDownBig" data-wow-duration="1s" data-wow-delay="0.9s"><span>Clients -</span>Satisfied clients thanks to our experience</li>
                        </ul>
                        <a class="wow zoomIn btn" data-wow-duration="1s" href="#">Browse our work</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="team">
            <div class="container">
                <h3 class="wow flipInY team-title" data-wow-duration="1s">Meet <span>our team</span></h3>
                <input type="radio" name="img" id="img1" checked >
                <input type="radio" name="img" id="img2" >
                <input type="radio" name="img" id="img3" >
                <div class="teamlist run1">
                    <div class="wow fadeInDown" data-wow-duration="1s" >
                        <div class="image"><img src="./images/cover.jpg" /></div>
                        <h3>Jason Statham</h3>
                        <span>Knife designer</span>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                    <div class="wow fadeInDown" data-wow-duration="1s" >
                        <div class="image"><img src="./images/cover.jpg" /></div>
                        <h3>Jason Statham</h3>
                        <span>Knife designer</span>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                    <div class="wow fadeInDown" data-wow-duration="1s">
                        <div class="image"><img src="./images/cover.jpg" /></div>
                        <h3>Jason Statham</h3>
                        <span>Knife designer</span>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                    <div class="wow fadeInDown" data-wow-duration="1s" >
                        <div class="image"><img src="./images/cover.jpg" /></div>
                        <h3>Jason Statham</h3>
                        <span>Knife designer</span>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>
                <div class="teamlist run2">
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image"><img src="./images/cover1.jpg" /></div>
                            <h3>Jason Statham</h3>
                            <span>Knife designer</span>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image"><img src="./images/cover1.jpg" /></div>
                            <h3>Jason Statham</h3>
                            <span>Knife designer</span>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image"><img src="./images/cover1.jpg" /></div>
                            <h3>Jason Statham</h3>
                            <span>Knife designer</span>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image"><img src="./images/cover1.jpg" /></div>
                            <h3>Jason Statham</h3>
                            <span>Knife designer</span>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                </div>
                <div class="teamlist run3">
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image"><img src="./images/cover2.jpg" /></div>
                            <h3>Jason Statham</h3>
                            <span>Knife designer</span>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s">
                            <div class="image"><img src="./images/cover2.jpg" /></div>
                            <h3>Jason Statham</h3>
                            <span>Knife designer</span>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image"><img src="./images/cover2.jpg" /></div>
                            <h3>Jason Statham</h3>
                            <span>Knife designer</span>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image"><img src="./images/cover2.jpg" /></div>
                            <h3>Jason Statham</h3>
                            <span>Knife designer</span>
                            <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                        </div>
                </div>

                <div class="wow rubberBand teammore" data-wow-duration="2s">
                    <label for="img1"><span></span></label>
                    <label for="img2"><span></span></label>
                    <label for="img3"><span></span></label>
                </div>
            </div>
        </div>
        <div class="services">
            <div class="container">
                <h3 class="wow flipInY services-title" data-wow-duration="1s">take a look at  <span>our services</span></h3>
                <p class="wow flipInX services-desc" data-wow-duration="1s">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil)
                by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The
                first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                <div class="serviceslist">
                    <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="0s">
                        <div class="image"><img src="./images/services-img.png" /></div>
                        <h3>Web design</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                    </div>
                    <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="400ms">
                        <div class="image"><img src="./images/services-img.png" /></div>
                        <h3>Jason Statham</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                    </div>
                    <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="600ms">
                        <div class="image"><img src="./images/services-img.png" /></div>
                        <h3>Jason Statham</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                    </div>
                    <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="800ms">
                        <div class="image"><img src="./images/services-img.png" /></div>
                        <h3>Jason Statham</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="clients">
            <div class="container">
                <input type="radio" name="container-image" id="clients-img1" checked>
                <input type="radio" name="container-image" id="clients-img2" >
                <input type="radio" name="container-image" id="clients-img3" >
                <div class="wow rubberBand container-img1" data-wow-duration="1s">
                    <h3 class="wow flipInY clients-title" data-wow-duration="1s">SOME OF  <span>OUR CLIENTS</span></h3>
                    <div class="clientslist">
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                    </div>
                </div>
                <div class="wow bounceInRight container-img2" data-wow-duration="1s">
                    <h3 class="wow flipInY clients-title" data-wow-duration="1s">A good  <span>product</span></h3>
                    <div class="clientslist">
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                    </div>
                </div>
                <div class="wow bounceInRight container-img3" data-wow-duration="1s">
                    <h3 class="wow flipInY clients-title" data-wow-duration="1s">communicate with  <span>each other</span></h3>
                    <div class="clientslist">
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                        <div class="image"><img src="./images/client-img.png" /></div>
                    </div>
                </div>
                <div class="wow rubberBand clientsmore" data-wow-duration="2s">
                    <label for="clients-img1"><span></span></label>
                    <label for="clients-img2"><span></span></label>
                    <label for="clients-img3"><span></span></label>
                </div>
            </div>
        </div>
        <div class="work">
            <div class="container">
                <h3 class="wow flipInY work-title" data-wow-duration="1s">take a look at <span>our services</span></h3>
                <p class="wow flipInX work-desc" data-wow-duration="1s">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
                    Finibus Bonorum et Malorum" (The Extremes of Good and Evil)
                    by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
                    The
                    first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                <div class="worklist">
                    <input type="radio" name="worklist-image" id="worklist-image1" checked>
                    <input type="radio" name="worklist-image" id="worklist-image2">
                    <input type="radio" name="worklist-image" id="worklist-image3">
                    <input type="radio" name="worklist-image" id="worklist-image4">
                    <div class="work-header">
                        <span class="wow fadeInLeft work-list-title" data-wow-duration="1s">Filter by type</span>
                        <nav class="wow fadeInRight work-nav" data-wow-duration="1s">
                            <label for="worklist-image1">All</label>
                            <label for="worklist-image2">Web design</label>
                            <label for="worklist-image3">Mobile design</label>
                            <label for="worklist-image4">Photograpy</label>
                        </nav>
                    </div>
                    <div class="work-data worklist-image1-a" >
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="100ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="200ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="400ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="500ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="600ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="700ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="800ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="900ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="1000ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="1100ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="1200ms">
                            <div class="image">
                                <img src="./images/work-img.png" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="work-data worklist-image2-a" >
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img2.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="work-data worklist-image3-a" >
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img3.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="work-data worklist-image4-a" >
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <div class="wow bounceInRight" data-wow-duration="1s" >
                            <div class="image">
                                <img src="./images/work-img4.jpg" />
                                <div class="img-title ">
                                    <span>TREND AND FASHION</span>
                                    <span>Website design</span>
                                    <a href=""><img src="./images/work-image.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="test">
            <div class="container">
                <input type="radio" name="test-img" id="test-img1" checked>
                <input type="radio" name="test-img" id="test-img2" >
                <input type="radio" name="test-img" id="test-img3" >
                <div class="test-image1">
                    <h3 class="wow flipInY test-title" data-wow-duration="1s">our clients’ <span>testimonials</span></h3>
                    <p class="wow flipInY test-desc" data-wow-duration="1s">
                        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
                        "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </p>
                    <p class="wow flipInY test-desc" data-wow-duration="1s">Dean Martin, CEO Acme Inc.</p>
                </div>
                <div class="test-image2">
                    <h3 class="wow flipInY test-title" data-wow-duration="1s">talk to <span>each other</span></h3>
                    <p class="wow flipInY test-desc" data-wow-duration="1s">
                        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
                        "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </p>
                    <p class="wow flipInY test-desc" data-wow-duration="1s">Dean Martin, CEO Acme Inc.</p>
                </div>
                <div class="test-image3">
                    <h3 class="wow flipInY test-title" data-wow-duration="1s">Creative <span>projects</span></h3>
                    <p class="wow flipInY test-desc" data-wow-duration="1s">
                        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
                        "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </p>
                    <p class="wow flipInY test-desc" data-wow-duration="1s">Dean Martin, CEO Acme Inc.</p>
                </div>
                <div class="wow rubberBand testmore" data-wow-duration="2s">
                    <label for="test-img1"><span></span></label>
                    <label for="test-img2"><span></span></label>
                    <label for="test-img3"><span></span></label>
                </div>
            </div>
        </div>
        <div class="contact">
            <div class="container">
                <h3 class="wow flipInY contact-title" data-wow-duration="1s">feel free to <span>contact us</span></h3>
                <p class="wow flipInX contact-desc" data-wow-duration="1s">Lorem Ipsum comes from Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil)
                by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</p>
                <div class="contact-form">
                    <div class="contact-row">
                        <div class="wow slideInLeft contact-name" data-wow-duration="1s" data-wow-delay="200ms">
                            <h4>Name<sup>*</sup></h4>
                            <input type="text" placeholder="请输入名称" name="username" />
                        </div>
                        <div class="wow slideInRight contact-email" data-wow-duration="1s" data-wow-delay="400ms">
                            <h4>Email address<sup>*</sup></h4>
                            <input type="email" placeholder="请输入邮箱地址" name="email" />
                        </div>
                    </div>
                    <div class="contact-row">
                        <div class="wow zoomIn contact-message" data-wow-duration="1s" data-wow-delay="600ms">
                            <h4>Message<sup>*</sup></h4>
                            <textarea placeholder="请输入内容" name="message" id="" cols="30" rows="10"></textarea>
                        </div>
                    </div>
                    <div class="wow jackInTheBox contact-row" data-wow-duration="1s">
                        <button>SEND</button>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                <p class="wow flipInX copyright" data-wow-duration="1s">ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></p>
                <nav class="links">
                    <a class="wow zoomInLeft" data-wow-duration="1s" data-wow-delay="100ms" href="#"><img src='./images/links-img.png'></a>
                    <a class="wow zoomInLeft" data-wow-duration="1s" data-wow-delay="200ms" href="#"><img src='./images/links-img.png'></a>
                    <a class="wow zoomInLeft" data-wow-duration="1s" data-wow-delay="300ms" href="#"><img src='./images/links-img.png'></a>
                    <a class="wow zoomInLeft" data-wow-duration="1s" data-wow-delay="400ms" href="#"><img src='./images/links-img.png'></a>
                    <a class="wow zoomInLeft" data-wow-duration="1s" data-wow-delay="500ms" href="#"><img src='./images/links-img.png'></a>
                </nav>
            </div>
        </footer>
    </div>
</body>
</html>
<script>

    //初始化懒加载
    new WOW().init();
</script>